import React, { useEffect, useState } from 'react'
import './Home.css'
import { BellOutline } from 'antd-mobile-icons'
import { Button, SearchBar, Tabs } from 'antd-mobile'
import Tabber from '../../commponts/Tabber'
import { getHomeList } from '../../request/index'
const imgss = require('../../assents/23.png')
const imgs = require('../../assents/111.png')
const Home = () => {
const onclck=()=>{
    window.location.href='/List'
}
    const [homeLits, setHomeLits] = useState<any>([])

    useEffect(() => {
       getHomeList().then(res=>{
        console.log(res);
        setHomeLits(res.data.data)
       })
    }, [])

    return (
        <div>
            <div className='Home-top'>
                <span>当前位置</span><br />
                <span className='Home-s'><b>杭州市,浙江省</b></span>
                <div className='Home-ioc'>
                    <span ><BellOutline /></span>
                    <div className='ioc'></div>
                </div>

            </div>
            <div>
                <SearchBar placeholder='搜索' />
            </div>
            <br />
            <div>
                <Tabs>
                    <Tabs.Tab title='全部' key='fruits'>
                        <span>即将开展</span>
                        <span className='kk'>查看所有</span><br /><br />
                        <img src={imgss} alt="" />

                    </Tabs.Tab>
                    <Tabs.Tab title='音乐会' key='vegetables'>
                        西红柿
                    </Tabs.Tab>
                    <Tabs.Tab title='研讨会' key='animals'>
                        蚂蚁
                    </Tabs.Tab>
                    <Tabs.Tab title='影院' key='animals'>
                        蚂蚁
                    </Tabs.Tab>
                </Tabs>
            </div>
            <div className='sy'>
                <span>为你推荐</span>
                <span className='lo' onClick={onclck}>展开首所有</span>

                {
                    homeLits.map((item:any) => {
                        return (
                            <div className='Home-List'>
                                <img className='imges' src={item.imgPath} alt="" />
                                <div className='Home-l'>
                                    <span>{item.showName}</span><br />
                                    <span>{item.showCity}</span><br />
                                    <span>{item.showDetail}</span><br />
                                    <span>{item.showDate}</span><br />
                                    <span>{item.showDay}</span><br />
                                    <span>{item.showPrice}</span><br />
                                </div>
                            </div>

                        )
                    })
                }




            </div>
            <Tabber />
        </div>
    )
}

export default Home
